<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>03_事件</title>
    <script src="https://unpkg.com/react@16/umd/react.development.js" crossorigin></script>
    <script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js" crossorigin></script>
    <script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
</head>
<body>
    <div id="app"></div>
    <script type="text/babel">
        /*
        * React里绑定事件的语法：
        *   on事件名={触发函数} 注意：事件名首字母大写绑定事件的值的写法有多种：
        *       写法1：on事件名={this.函数名}
        *           特点：
        *               1.1 不能传参
        *               1.2 无法获得this
        *               1.3 事件对象建议通过event直接获取
        *       写法2：on事件名={this.函数名.bind(this)}
        *           特点：
        *               2.1 可以传参
        *               2.2 可以获得this，this为当前组件实例
        *               2.3 也可以直接通过event获取事件对象
        *               2.4 效率上有问题，使用bind每次都要获取this
        *       写法3：通过constructor构造函数，一次性修改this指向，类似于写法1
        *           特点：
        *               3.1 无法传递参数
        *               3.2 可以获得this
        *               3.3 也可以直接通过event获取事件对象
        *               3.4 效率问题解决，只获得一次this
        *       写法4：on事件名={()=>this.函数名()}
        *           特点：
        *               4.1 可以传递参数
        *               4.2 可以获得this
        *               4.3 也可以直接通过event获取事件对象
        * */
        let app = document.getElementById('app')
        let {Component,Fragment} = React;
        class Child1 extends Component {
            // 每个组件实例都有一个构造函数constructor，该函数会在组件实例化时触发，而且在组件的整个生命周期的过程中只触发一次，我们可以在该函数里做一些数据的初始化工作
            constructor(props) {
                super(props);
                // 在组件初始化时，修改一次this的指向即可
                this.btn3Click=this.btn3Click.bind(this)
            }
            render(){
                return <fieldset>
                    <legend>
                        <h2>Child1组件</h2>
                    </legend>
                    <button onClick={this.btn1Click}>按钮1</button>
                    <button onClick={this.btn2Click.bind(this,100,"hello")}>按钮2</button>
                    <button onClick={this.btn3Click}>按钮3</button>
                    <button onClick={()=>this.btn4Click(100,"hello")}>按钮4</button>
                </fieldset>
            }
            btn1Click(e){
                let even = e || event;
                console.log("按钮1点击事件触发",this,e,event)
            }
            btn2Click(a1,a2){
                console.log("按钮2点击事件触发",this,a1,a2,event)
            }
            btn3Click(){
                console.log("按钮3点击事件触发",this,event)
            }
            btn4Click(a1,a2){
                console.log("按钮4点击事件触发",this,event,a1,a2)
            }
        }
        ReactDOM.render(<Child1></Child1>,app)
            
    </script>
</body>
</html>